<template>
	<tm-fullView>
		<tm-sheet :flat="true" :margin="[0, 0]" :padding="[0, 20]"></tm-sheet>
		<tm-sheet :flat="true" :padding="[0, 44]" :margin="[0, 0]">
			<c-tabs active-border-color="active-border-color" bgColor="grey-darkten-3" unactiveColor="text-grey" model="line"
				color="rgba(4, 4, 4, 1)" :active-font-size="36" align="left" shadow="0" v-model="activeIndex"
				:list="list" range-key="title"></c-tabs>
			<view class="mt-20 px-30">
				<view class="grey-lighten-4 py-10 px-30 round-20 flex" :class="[black_theme ? 'bk' : '']">
					<tm-icons name="icon-search" color="grey-lighten-1"></tm-icons>
					<view class="mx-20"><text class="text-size-n text-grey-lighten-1">同城复赛今晚开始</text></view>
				</view>
			</view>
			<view class="mt-30">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<template v-for="(item, index) in scrollList">
						<view id="demo1" class="scroll-view-item_H ml-20" :class="[item.class, index == scrollList.length-1 ? 'mx-20' : 'ml-20', index == 0 ? 'shadow-purple-1' : '', black_theme ? 'bk' : '']">
							<view class="relative t-8">
								<tm-images :src="item.icon" :width="48"></tm-images>
							</view>
							<view class="relative b-40">
								<text class="text-size-s">{{ item.text }}</text>
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="relative b-20">
				<view class="mt-0 px-20">
					<uni-row :gutter="10">
						<template v-for="(item, index) in rowList">
							<uni-col :span="12">
								<view class="col-view-item round-10 mt-20 relative" @tap="toLiveIndex">
									<tm-images :src="item.img" :width="336" :height="432" :round="5" model="aspectFill"></tm-images>
									<view class="absolute col-view-item round-5 flex-col flex-between t-0">
										<view class="fulled">
											<view class="pa-20 flex col-view_top" :class="[`flex-${item.iconPosition}`]" v-if="item.icon">
												<tm-images :src="item.icon" :width="110" :height="38" model="widthFix"></tm-images>
											</view>
										</view>
										<view class="fulled round-5">
											<view class="px-20 py-10 flex-between col-view_bottom round-5">
												<view>
													<text class="text-white text-size-n" :class="black_theme ? 'text-grey-lighten-2' : ''">{{ item.name }}</text>
												</view>
												<view>
													<text class="text-white pr-5 relative t-3" :class="black_theme ? 'text-grey-lighten-2' : ''">{{ item.personNumber }}</text>
													<text class="text-white text-size-xxs text-weight-s">在看</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-col>
						</template>
					</uni-row>
				</view>
			</view>
			<tm-flotbutton :offset="[16, 32]" label="暗黑" :show-text="true" color="bg-gradient-purple-accent" icon="icon-lightbulb" @click="changeTheme"></tm-flotbutton>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				list: ['热门', '交友', '直播'],
				sysinfo: null,
				scrollList: [{
					icon: 'static/live/zbpd_top.png',
					text: '直播派对',
					class: 'purple'
				}, {
					icon: 'static/live/zbdt_top.png',
					text: '主播电台',
					class: 'blue'
				}, {
					icon: 'static/live/ltyy_top.png',
					text: '聆听音乐',
					class: 'pink'
				}, {
					icon: 'static/live/mxhd_top.png',
					text: '明星活动',
					class: 'blue'
				}, {
					icon: 'static/live/hd_top.png',
					text: '活动活动',
					class: 'green'
				}],
				rowList: [{
					img: 'https://img.js.design/assets/img/616678eb2769e00d41966add.jpg',
					name: '王夏',
					icon: 'static/live/huati.png',
					iconPosition: 'left',
					personNumber: 8350
				}, {
					img: 'https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg',
					name: '田瑶',
					personNumber: 4218
				}, {
					img: 'https://img.js.design/assets/img/616678ebc7bf4c487aedb5b1.jpg',
					name: '王夏',
					personNumber: 8350
				}, {
					img: 'https://img.js.design/assets/img/616678ebc7bf4cfb0bedb5b2.jpg',
					name: '曹若春',
					personNumber: 9095
				}, {
					img: 'https://img.js.design/assets/img/616678eb144489bffcefc3f4.jpg',
					name: '曹若春',
					personNumber: 8350
				}, {
					img: 'https://img.js.design/assets/img/616678eb1444897952efc3f5.jpg',
					name: '汉娜',
					personNumber: 8350
				}]
			}
		},
		onReady() {
			this.sysinfo = uni.getSystemInfoSync();
			console.log(this.sysinfo);
			// this.$tm.theme.setBlack(false);
			// this.$tm.theme.setTheme('blue');
			setTimeout(() => {
				console.log(this.$refs);
			}, 1000);
		},
		computed: {
			black_theme: function() {
				return this.$tm.vx.state().tmVuetify.black;
			}
		},
		methods: {
			changeTheme() {
				this.$tm.theme.setBlack(!this.black_theme);
			},
			toLiveIndex() {
				uni.navigateTo({
					url: '/pages/live/index'
				});
			}
		}
	}
</script>

<style>
	.active-border-color {
		background: linear-gradient(90deg, rgba(180, 101, 218, 1) 0%, rgba(207, 108, 201, 1) 33%, rgba(238, 96, 156, 1) 66%, rgba(238, 96, 156, 1) 100%);
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		width: 152rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 36rpx;
		border-radius: 20rpx;
	}
	.col-view-item {
		width: 336rpx;
		height: 432rpx;
	}
	.col-view_bottom {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 99.94%);
	}
	.col-view_top {
		height: 38rpx;
	}
</style>
